<template lang="html">
  <div>
    <div class="btn">
        <el-button type="primary" @click="back">返回上级</el-button>
    </div>
    <div class="form">
      <el-form :model="pageData" ref="ruleForm" label-width="135px" class="demo-ruleForm">
         <el-form-item label="商品标题">
             <el-input v-model="pageData.productTitle" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="是否为手机">
            <el-select v-model="pageData.isMobile"   placeholder="请选择">
              <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in Mobile"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="手机型号" v-if="pageData.isMobile == 'Y'">
                <el-input v-model="pageData.unitType" placeholder="请输入内容"></el-input>
           </el-form-item>
           <el-form-item label="是否热门">
             <el-select v-model="pageData.isHot" placeholder="请选择">
               <!-- <el-option value="">请选择</el-option> -->
                 <el-option
                   v-for="item in isHot"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="商品分类(一级)">
              <el-select v-model="pageData.categoryIdFirst" placeholder="请选择" @change="getCategoryId">
                <el-option value="">请选择</el-option>
                  <el-option
                    v-for="item in category"
                    :key="item.value"
                    :label="item.categoryName"
                    :value="item.categoryId">
                  </el-option>
                </el-select>
             </el-form-item>
             <el-form-item label="商品分类(二级)">
               <el-select v-model="pageData.categoryIdSecond" placeholder="请选择">
                 <el-option value="">请选择</el-option>
                   <el-option
                     v-for="item in categoryId"
                     :key="item.value"
                     :label="item.categoryName"
                     :value="item.categoryId">
                   </el-option>
                 </el-select>
              </el-form-item>
          <el-form-item label="商品品牌">
            <el-select v-model="pageData.brandId" placeholder="请选择">
              <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in brand"
                  :key="item.value"
                  :label="item.brandDisplayName"
                  :value="item.brandId">
                </el-option>
              </el-select>
           </el-form-item>
          <el-form-item label="寄卖商品初始价格">
              <el-input v-model="pageData.originPrice" placeholder="请输入内容"></el-input>
           </el-form-item>
           <el-form-item label="寄卖最高价">
               <el-input v-model="pageData.consignMaxPrice" placeholder="请输入内容"></el-input>
            </el-form-item>
           <el-form-item label="寄卖商品的期限">
               <el-input v-model="pageData.consignTerm" placeholder="1个月,3个月,6个月,12个月"></el-input>
            </el-form-item>


        <el-form-item label="支持的寄卖方式">
          <el-select v-model="pageData.consignType" multiple  placeholder="请选择">
            <el-option value="">请选择</el-option>
              <el-option
                v-for="item in manner"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
         </el-form-item>
          <el-form-item label="是否为奢饰品">
            <el-select v-model="pageData.isLuxuries" placeholder="请选择">
              <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in Luxuries"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>

          <el-form-item label="是否为上架">
            <el-select v-model="pageData.isOnline"   placeholder="请选择">
              <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in Online"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="是否允许加价">
            <el-select v-model="pageData.isIncrease"   placeholder="请选择">
              <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in Increase"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
              <el-form-item label="商品图片" prop="imgUrl">
                    <el-upload
                     class="upload-demo"
                     :auto-upload='false'
                     :on-change="upload"
                     :file-list="fielList"
                     :limit="1"
                     :on-exceed	= "exceed"
                     action="https://jsonplaceholder.typicode.com/posts/"
                     :list-type="String"
                     list-type="picture">
                     <el-button size="small" type="primary">点击上传</el-button>
                   </el-upload>
              </el-form-item>
              <el-form-item class="confirm">
                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Data from './addProudctData.js'
import { Base64 } from 'js-base64';
import {
  brandList,
  productClassList,
  addProduct,
  ClassBrandList
} from "@/api/product/product";
export default {
   data () {
     return JSON.parse(JSON.stringify(Data))
   },
   mounted () {
     // this.getBrand();
     this.getcategory();
   },
   methods : {
     getClassBrandList (categoryId) {//根据商品分类id获取品牌
        this.brand = [];
        this.pageData.brandId = '';
        ClassBrandList (categoryId).then(res=>{
          this.brand = res.data.data;
        })
     },
     getcategory () {//一级分类
       productClassList(this.data).then(res=>{
         if (res.data.code == 'OK') {
              this.category = res.data.data.records;
         }
       })
     },
     getCategoryId (val) {//获取二级分类id
       // if ()
       this.categoryId = [];
      this.pageData.categoryIdSecond = ''

       if (this.pageData.categoryIdFirst !== '') {
         this.data['parentCategoryId'] = val;
         productClassList(this.data).then(res=>{
           if (res.data.code == 'OK') {
                this.categoryId = res.data.data.records;
                 if (this.categoryId.length < 1) {//说明是开数组
                    this.getClassBrandList(this.pageData.categoryIdFirst)
                 } else {
                   this.getClassBrandList(this.pageData.categoryIdSecond)
                 }

           }
         })
       } else {
         this.categoryId = [];
         this.pageData.categoryIdSecond = ''
       }
     },
     upload (file,fileList) {//拿到图片的地址
          let reader = new FileReader();
          reader.readAsDataURL(file.raw);
          reader.onload =  () => {
            this.pageData.productPicture = reader.result.split(',')[1];
          }
     },
     exceed () {
         this.$message.error('只能添加一张图片');
     },
     submitForm () {
       var type = this.pageData.consignType.join(',');
       this.pageData.consignType = type;
       addProduct(this.pageData,'post').then(res=>{
         if (res.data.code =='OK') {
             this.$message.success('新增成功');
             setTimeout(()=>{
               this.$router.push({
                 name : 'productAdmin'
               })
             },1000)
         } else {
           this.$message.error(res.data.message);
         }
       })
     },
      back () {
        this.$router.push({
          name : 'productAdmin'
        })
      }
   }
}
</script>

<style lang="css">
.btn {
  margin-top: 10px;
}
.form {
  margin-top:20px;
  width:100%;
  background: #fff;
}
.el-form {
  /* width: 30%; */
  padding: 20px 20px;
}
.el-input{
  width: 200px !important;
}
</style>
